<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        filters：过滤器不改变真正的`data`，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，
                 并在前端处理数据的格式。过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
        计算属性：结果是基于之前数据实时计算出来的
        监听器：watch 可以让我们监控一个值的变化。从而做出相应的反应。
     -->

    <div id="app">
        <ul>
            <li>西游记：价格{{xyjPrice}}，数量：
                <input type="number" v-model="xyjNum"></li>
            <li>水浒传：价格{{shzPrice}}，数量：
                <input type="number" v-model="shzNum"></li>
            <li>总价：{{totalPrice}}</li>
            {{msg}}
        </ul>
        <table>
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <!-- 使用代码块实现，有代码侵入 -->
                <td>{{user.gender===1? "男":"女"}}</td>
                <td>{{user.gender | genderFilter | capitalize}}</td>
            </tr>
        </table>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.filter('capitalize', function (value) {
            return value.charAt(0).toUpperCase() + value.slice(1)
        })
        let app = new Vue({
            el: "#app",
            data: {
                xyjPrice: 56.73,
                shzPrice: 47.98,
                xyjNum: 1,
                shzNum: 1,
                msg: "",
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            computed: {
                totalPrice() {
                    return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum;
                    is.shzNum;
                }
            },
            watch:{
                xyjNum(newVal, oldVal) {
                    if (newVal >= 3) {
                        this.msg = "西游记没有更多库存了";
                        this.xyjNum = 3;
                    } else {
                        this.msg = "";
                    }
                }
            },
            filters:{
                genderFilter: function(gender) {
                    return gender === 1 ? '男~' : '女~'
                }
            }
        })
    </script>
</body>
</html>